Quarto World Bank Theme

A minimalist theme for Quarto/Reveal.js presentations for the World Bank

Bernhard Bieri

The World Bank

Monday, the 12th of December, 2022

Authors

Author 1

Affiliation

Author 2

Affiliation

Author 3

Affiliation

Introducing the World Bank’s Quarto theme

This presentation template accelerates the creation of Reveal.js presentations by taking care of the formatting of your presentations so that users can focus on the content.

What is Quarto?

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations see https://quarto.org/docs/presentations/.

This is part of the Quarto documentation.

Why Quarto? What about Rmd presentations?

  • Yihui Xie has a neat blog post explaining the difference between the two ways of rendering presentations.
  • Quarto also has a nice FAQ thread on their website about the differences between .Rmd and Quarto documents.
  • Key Insight 1: While there is no obvious need for existing .Rmd users to switch yet, Quarto’s new features will most likely not be backported to .Rmd.
  • Key Insight 2: The present template can easily be used by folks running their analysis in Python thanks to the language agnostic nature of Quarto!

Sharing your presentation!

Bullets

When you click the Render button a document will be generated that includes:

  • Content authored with markdown
  • Output from executable code

This is part of the Quarto documentation.

Code

When you click the Render button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

1 + 1
[1] 2

This is part of the Quarto documentation.

You can also add text marked as code!

Running Python within Quarto Presentation with {reticulate}

You can even render content written in Python directly thanks to the {reticulate} R-package and a Python installation.

Code 
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(
  subplot_kw = {'projection': 'polar'} 
)
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

Figure 1: A line plot on a polar axis

Equations

Adding Latex style equations is straightforward. Here is Euler’s identity:

\[ \begin{equation} e^{i\pi} + 1 = 0 \end{equation} \]

And here is Shepherd’s lemma:

\[ \begin{equation} \frac{P_1 - P_2}{Q_1 - Q_2} > \frac{P_1 - P_3}{Q_1 - Q_3} \end{equation} \]

New topic!

To make a slide like this, use:

# Title of slide {background-color="#002244"}

Tabset example

Content here for tabset 1 :)

More content here, for tabset 2 :)

Incremental content

Hi!

Use . . . to separate content as an incremental slide!

You can add R code…

library(dplyr)
library(ggplot2)
g <- starwars |> 
  ggplot() +
  geom_point(aes(x = height, y = mass)) +
  theme_light()

You can add R code…and focus on a specific line:

library(dplyr)
library(ggplot2)
g <- starwars |> 
  ggplot() +
  geom_point(aes(x = height, y = mass)) +
  theme_light()

See the Quarto Documentation for more details.

Before showing the results :)

g

Creating interactive graphs with Observable JS

Plot

Another Observable JS example using the World Bank API

Creating live forms with Observable JS

What about tables?

knitr::kable()

tab <- starwars |>
  tidyr::drop_na(species) |> 
  group_by(species) |>
  summarise(
    n = n(),
    mean_heigth = round(mean(height, na.rm = TRUE)),
    mean_mass = round(mean(mass, na.rm = TRUE))
  ) |> 
  slice_max(order_by = n, n = 4) 

knitr::kable(tab)
species n mean_heigth mean_mass
Human 35 177 83
Droid 6 131 70
Gungan 3 209 74
Kaminoan 2 221 88
Mirialan 2 168 53
Twi’lek 2 179 55
Wookiee 2 231 124
Zabrak 2 173 80

DT::datatable()

With the smaller class in the slide! Ex: ## slide name {.smaller}

gt::gt()

species n mean_heigth mean_mass
Human 35 177 83
Droid 6 131 70
Gungan 3 209 74
Kaminoan 2 221 88
Mirialan 2 168 53
Twi'lek 2 179 55
Wookiee 2 231 124
Zabrak 2 173 80

reactable::reactable()

Slide with speaker notes

Adding speaker notes is easilz done by creating a slide containing a div with class .notes, e.g.:

## Slide with speaker notes

Slide content

::: {.notes}
Speaker notes go here.
:::

When in presentation mode, you can access the speaker notes by pressing s on your keyboard.

Creating an automatic bibliography:

Research is almost always built upon existing knowledge. Acknowledging the latter is therefore key. Quarto allows this bz specifying bibliography: bibfile.bib in the YAML header.

One can then add citations with the @ key (Arrow 1973). To generate the bibliography simply insert a slide with:

## References

::: {#refs}
:::

See the Quarto documentation entry on citations for more details.

References

Arrow, Kenneth J. 1973. “Review of Some Ordinalist-Utilitarian Notes on Rawls’s Theory of Justice.” The Journal of Philosophy 70 (9): 245–63. https://doi.org/10.2307/2025006.

Sharing your presentation!

Presenting your rendered presentation

Rendering your presentation will create either a self-contained HTML presentation or an HTML file plus a folder with all supporting files needed by your presentation depending on whether embed-resources: is set to true or not in the YAML header.

To present your slides locally, simply open the html file in your favorite browser. Don’t forget to check out the key-bindings by typing ? once your presentation is open in your browser.

Sharing your HTML presentation online

Sharing your HTML presentation takes one line of code! Open up a terminal and type the following line to deploy your presentation to Netlify.

quarto publish netlify yourpresentation.qmd

See the Quarto documentation for ways of publishing your presentation.

Exporting into PDF

You can use the function pagedown::chrome_print() to print the HTML version into a PDF!

# install.packages("pagedown")
pagedown::chrome_print("path-to-file.html")

Acknowlegements

This presentation and the template it showcases are inspired from the following creators:

Useful Resources

Want to go further? Here are some great resources to get you started:

World Bank theme for Quarto Presentations. Code available on GitHub.